<script setup lang="ts">
import { computed } from 'vue'

import { NumUtil } from '@xtail/core'

import type { TablePropsType } from './tyeps'

defineOptions({
  name: 'XTable',
})

const {
  columns,
  data,
  autoScrollX = true,
  colWidthDefault = 80,
  tableProps,
} = defineProps<TablePropsType>()

const autoScrollXComputed = computed(() => {
  if (!autoScrollX) return 0
  let scrollX = 0
  for (const col of columns) {
    const colWidth = col.width ?? colWidthDefault
    scrollX += NumUtil.isNum(colWidth) ? colWidth : colWidthDefault
  }
  return scrollX
})
</script>

<template>
  <div class="x-table">
    <n-data-table
      class="x-table__table"
      v-bind="{
        columns,
        data,
        maxHeight: '100%',
        flexHeight: true,
        scrollX: autoScrollX ? autoScrollXComputed : undefined,
        ...(tableProps ?? {}),
      }"
    />
  </div>
</template>

<style scoped lang="scss">
@use './style' as *;
</style>
